<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="s" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html><html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>用户手机绑定嵌入页</title>
    <script type="text/javascript" src="<s:url value="../js/jquery.js"/>"></script>
    <script type="text/javascript" src="<s:url value="/js/layer/layer.js"/>"></script>
    <style>
        .title {
            text-align: center;
            text-align: justify;
            text-justify: distribute-all-lines;
            text-align-last: justify
        }
    </style>
    <script type="text/javascript">
        var clock = '';
        var deadTime = ${deadTime};
        if (!deadTime) {
            deadTime = 90;
        }
        var nums = deadTime;
        var btn;

        function getPhoneValidCode(thisBtn) {
            var phoneNO = $('#phoneNO').val();
            if (!phoneNO) {
                alert("请输入手机号码");
                return;
            }
            $('#phoneNO').attr("readonly", "readonly");
            btn = thisBtn;
            btn.disabled = true; //将按钮置为不可点击
            btn.value = nums + '秒后重新获取';
            clock = setInterval(doLoop, 1000); //一秒执行一次
            $.ajax({
                       url: "/user/getPhoneValidCode",
                       data: {"phoneNO": phoneNO},
                       cache: false,
                       type: "POST",
                       success: function (data) {
                           if (!data.result) {
                               resetbtn();
                           }
                       }
                   });
        }
        function doLoop() {
            nums--;
            if (nums > 0) {
                btn.value = nums + '秒后重新获取';
            } else {
                resetbtn();
            }
        }
        function resetbtn() {
            clearInterval(clock); //清除js定时器
            btn.disabled = false;
            $('#phoneNO').removeAttr("readonly");
            btn.value = '获取验证码';
            nums = deadTime; //重置时间
        }
        function bind() {
            if (!$('#phoneNO').val()) {
                alert("请输入手机号码");
                return;
            }
            if (!$('#code').val()) {
                alert("请输入验证码");
                return;
            }
            var code = $('#code').val();
            var phoneNO = $('#phoneNO').val();
            var acceptMessage = $("input[name='acceptMessage']:checked").val();
            ;
            $.ajax({
                       url: "/user/bindPhone",
                       data: {"phoneNO": phoneNO, "code": code, "acceptMessage": acceptMessage},
                       cache: false,
                       type: "POST",
                       success: function (data) {
                           if (data.result) {
                               layer.alert(data.msg, {title: false}, function () {
                                   var index = parent.layer.getFrameIndex(window.name);
                                   parent.layer.close(index);
                               });
                           } else {
                               layer.alert(data.msg, {
                                   title: false,
                                   anim: 0
                               });
                           }
                       }
                   });
        }
        function checkPhoneNO() {
            var phone = $("#phoneNO").val();
            var pattern = /^1\d{10}$/;
            if (!pattern.test(phone.trim())) {
                $("#validResult").html("请输入正确的手机号码");
            }
        }
    </script>

</head>

<body>
<div align="center">
    <p style="margin-top: 50px;" align="center">
        报关一线通平台增加短信服务
    </p>
    <p align="center">
        绑定手机号可享受平台相关的短信通知服务
    </p>
    <form>
        <table height="200" width="280" cellpadding="0" cellspacing="0" style="table-layout:fixed;"
               border="0">
            <tr hight="50">
                <td width="120"/>
                <td width="60"/>
                <td width="100"/>
            </tr>
            <tr>
                <td></td>
                <td colspan="2"><span id="validResult" style="color: red"></span></td>
            </tr>
            <tr>
                <td class="title">手机号：</td>
                <td colspan="2"><input style="width: 156px;height: 20px" id="phoneNO" type="text"
                                       name="phoneNO" placeholder="请输入手机号" onblur="checkPhoneNO()"/>
                </td>
            </tr>
            <tr>
                <td class="title">验证码：</td>
                <td><input style="width: 55px;height: 20px" id="code" type="text" name="code"/></td>
                <td align="right">
                    <input style="width: 100px;height: 26px;padding: 0px;" type="button"
                           value="获取验证码" onclick="getPhoneValidCode(this)"/>
                </td>
            </tr>
            <tr>
                <td class="title">接收查验通知：</td>
                <td colspan="2">
                    <input type="radio" name="acceptMessage" checked="checked" value="true">是
                    <input type="radio" name="acceptMessage" value="false">否
                </td>
            </tr>
            <tr>
                <td colspan="3" align="center">
                    <input style="height: 26px;background-color: #FF5722" type="button"
                           value="绑定手机号" onclick="bind()"/>
                </td>
            </tr>
            <tr></tr>
        </table>
    </form>
</div>

</body>
</html>